<div class="page-title">Advanced Search</div>

<form (ngSubmit)="onSubmit()" [formGroup]="form">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    <app-dynamic-form-input
      *ngFor="let formField of formFields"
      [input]="formField"
      [form]="form"
    ></app-dynamic-form-input>
  </div>
  <div class="flex flex-col md:flex-row gap-x-4 gap-y-2">
    <button mat-raised-button data-cy="search-btn">
      <mat-icon> search</mat-icon>
      <span>Search</span>
    </button>
    <button mat-raised-button (click)="form.reset()" type="button">
      <mat-icon> delete</mat-icon><span>Clear queue</span>
    </button>
    <button
      (click)="onAddAll()"
      *ngIf="trackTableData.totalElements > 0"
      mat-raised-button
      type="button"
    >
      <mat-icon> add</mat-icon>
      <span> Add all </span>
    </button>
    <span
      class="text-muted self-center"
      *ngIf="trackTableData.totalElements > 0"
      >{{ trackTableData.totalElements }} tracks found.</span
    >
  </div>
</form>

<div class="mt-4">
  <app-track-data-table
    *ngIf="(isLoadingResults | async) === false"
    [trackTableData]="trackTableData"
  ></app-track-data-table>
</div>
